<script lang="ts" setup>
//表单数据
import dayjs from "dayjs";
import {onMounted, reactive, type UnwrapRef} from "vue";
import {useRoute} from "vue-router";
import {getOfferDetailByIdAPI, updateOfferStatusAPI} from "@/apis/offer.ts";
import {QuestionCircleOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import router from "@/router";

//表单数据
interface FormState {
  offerId: string;
  offerJobseekerId: string;
  offerJobId: string;
  offerEmployerId: string;
  offerStatus: string;
  offerRemarks: string;
  offerEndTime: string;

  jobId: string;
  jobAdminStatus: string;
  jobStatus: string;
  jobEmployerId: string;
  jobTitle: string;
  jobDescription: string;
  jobRequirements: string;
  jobLocation: string;
  jobType: string;
  jobSalary: string;
  jobSalaryType: string;
  jobWorkingHours: string;
  jobStartDate: string;
  jobEndDate: string;

  employerIsVerified: string,
  employerStatus: string,
  employerCompanyName: string,
  userAvatarUrl: string,
  employerCompanyIndustry: string,
  employerCompanyAddress: string,
  employerCompanyDescription: string,
  employerCompanyWebsite: string
}

const formState: UnwrapRef<FormState> = reactive({

  offerId: '',
  offerJobseekerId: '',
  offerJobId: '',
  offerEmployerId: '',
  offerStatus: '',
  offerRemarks: '',
  offerEndTime: '',

  jobId: '',
  jobAdminStatus: '',
  jobStatus: '',
  jobEmployerId: '',
  jobTitle: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobStartDate: '',
  jobEndDate: '',
  jobWorkingHours: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',

  employerIsVerified: '',
  employerStatus: '',
  employerCompanyName: '',
  userAvatarUrl: '',
  employerCompanyIndustry: '',
  employerCompanyAddress: '',
  employerCompanyDescription: '',
  employerCompanyWebsite: ''
});

//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.offerId = route.params.offerId as string;
  getOfferDetailInfo()
})
const getOfferDetailInfo = () => {
  //获取offer信息
  getOfferDetailByIdAPI({
    offerId: formState.offerId
  }).then(res => {
    if (res.data.flag) {
      formState.offerId = res.data.data.offerId
      formState.offerJobseekerId = res.data.data.offerJobseekerId
      formState.offerJobId = res.data.data.offerJobId
      formState.offerEmployerId = res.data.data.offerEmployerId
      formState.offerStatus = res.data.data.offerStatus
      formState.offerRemarks = res.data.data.offerRemarks
      formState.offerEndTime = res.data.data.offerEndTime

      formState.jobId = res.data.data.jobId
      formState.jobAdminStatus = res.data.data.jobAdminStatus
      formState.jobStatus = res.data.data.jobStatus
      formState.jobEmployerId = res.data.data.jobEmployerId
      formState.jobTitle = res.data.data.jobTitle
      formState.jobDescription = res.data.data.jobDescription
      formState.jobRequirements = res.data.data.jobRequirements
      formState.jobLocation = res.data.data.jobLocation
      formState.jobType = res.data.data.jobType
      formState.jobSalary = res.data.data.jobSalary
      formState.jobSalaryType = res.data.data.jobSalaryType
      formState.jobWorkingHours = res.data.data.jobWorkingHours
      formState.jobStartDate = dayjs(res.data.data.jobStartDate).format('YYYY-MM-DD')
      formState.jobEndDate = dayjs(res.data.data.jobEndDate).format('YYYY-MM-DD')

      formState.employerIsVerified = res.data.data.employerIsVerified
      formState.employerStatus = res.data.data.employerStatus
      formState.employerCompanyName = res.data.data.employerCompanyName
      formState.userAvatarUrl = res.data.data.userAvatarUrl
      formState.employerCompanyIndustry = res.data.data.employerCompanyIndustry
      formState.employerCompanyAddress = res.data.data.employerCompanyAddress
      formState.employerCompanyDescription = res.data.data.employerCompanyDescription
      formState.employerCompanyWebsite = res.data.data.employerCompanyWebsite

    }
  })
}

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}
const accept = () => {
  updateOfferStatusAPI({
    offerId: formState.offerId,
    offerStatus: '已接受'
  }).then(res => {
    if (res.data.flag) {
      message.success('接受成功')
      router.go(-1)
    } else {
      message.error(res.data.message)
    }
  })
};
const refuse = () => {
  updateOfferStatusAPI({
    offerId: formState.offerId,
    offerStatus: '已拒绝'
  }).then(res => {
    if (res.data.flag) {
      message.success('拒绝成功')
      router.go(-1)
    } else {
      message.error(res.data.message)
    }
  })

};
</script>

<template>
  <div class="offerDetail">
    <div class="top">
      <a-page-header
          sub-title="Offer-列表"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="bottom">
      <div class="offer">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">offer-信息</a-divider>
        <a-descriptions title="请在截止时间之前接受 Offer , 否则将视为放弃!">
          <a-descriptions-item :span="3" label="状态">
            {{ formState.offerStatus }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="截止时间">
            {{ formState.offerEndTime }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="补充信息">
            {{ formState.offerRemarks }}
          </a-descriptions-item>
        </a-descriptions>
        <div class="check-button" v-if="formState.offerStatus === '待接受'">
          <a-button style="margin-right: 20px" type="primary" @click="accept">接受-offer</a-button>
          <a-popconfirm cancelText="取消" okText="确认" title="你确定拒绝该-offer-吗？" @confirm="refuse">
            <template #icon>
              <question-circle-outlined style="color: red"/>
            </template>
            <a-button danger style="margin-right: 20px" type="primary">拒绝-offer</a-button>
          </a-popconfirm>
        </div>
      </div>
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">职位-信息</a-divider>
        <a-descriptions :title="formState.jobTitle">
          <a-descriptions-item label="类型">{{ formState.jobType }}</a-descriptions-item>
          <a-descriptions-item label="薪资">{{ formState.jobSalary }} / {{ formState.jobSalaryType }}
          </a-descriptions-item>
          <a-descriptions-item label="地点">{{ formState.jobLocation }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="工作周期">
            {{ formState.jobStartDate }} -- {{ formState.jobEndDate }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="工作时间">
            {{ formState.jobWorkingHours }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位描述">
            {{ formState.jobDescription }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位要求">
            {{ formState.jobRequirements }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="employer">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">公司信息</a-divider>
        <a-badge-ribbon :color="Color(formState.employerIsVerified)" :text="formState.employerIsVerified">
          <div style="display: flex;padding-top: 30px">
            <div>
              <a-descriptions :title="formState.employerCompanyName">
                <a-descriptions-item label="公司行业">{{ formState.employerCompanyIndustry }}</a-descriptions-item>
                <a-descriptions-item :span="2" label="公司官网">
                  {{ formState.employerCompanyWebsite }}
                </a-descriptions-item>
                <a-descriptions-item :span="3" label="公司简介">
                  {{ formState.employerCompanyDescription }}
                </a-descriptions-item>
                <a-descriptions-item :span="3" label="公司地址">
                  {{ formState.employerCompanyAddress }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
            <div>
              <a-avatar
                  :size="150"
                  :src="'http://localhost:8080/image/download?name=' + formState.userAvatarUrl"
              />
            </div>
          </div>
        </a-badge-ribbon>
      </div>

    </div>
  </div>

</template>

<style scoped>
.offerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 10%;
    padding-left: 30px;
  }

  .bottom {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 90%;
    padding: 10px;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .offer {
      border-radius: 20px;
      padding: 10px 50px 50px;
      border: 1px solid #ccc;
      height: auto;
      overflow: auto; /* 或者使用 overflow: hidden; */

      .check-button {
        border: 2px solid #ccc;
        padding: 25px;
        border-radius: 20px;
        display: flex;
        float: right;
      }
    }

    .job {
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 10px 50px 50px;
    }

    .employer {
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 10px 50px 50px;
    }
  }
}

</style>
